<template>
	<div class="container padding-top-sm">
		<div class="senior-search">
			<div class="e-breadcrumb el-flex text-888 margin-left-sm text-xs">
			</div>
			<div class="group-search text-sm">
				<el-button type="primary" icon="el-icon-plus" @click="addFlow">添加流程</el-button>
			</div>
		</div>
		<div class="tab">
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column prop="id" label="ID" width="180">
				</el-table-column>
				<el-table-column prop="title" label="流程名称">
				</el-table-column>
				<el-table-column prop="approve_name" label="审批人">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="300">
					<template slot-scope="scope">
						<span class="text-blue cp" v-if="scope.row.id != 1"  @click="eventClick(scope.row)">修改</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagination">
			<el-pagination layout="prev, pager, next" :page-size="tabPages.page_size" :total="total" background
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>
		<el-dialog title="添加用户" :visible.sync="dialog.addDialog" width="40%">
			<div slot="title" class="dialog-header" v-if="id==''">添加流程</div>
			<div slot="title" class="dialog-header" v-else>修改流程</div>
			<div class="dialog-content-box">
				<el-form ref="addForm" :rules="rules" :model="addForm" label-width="100px">
					<el-form-item label="流程名称" prop="title">
						<el-input v-model="addForm.title"></el-input>
					</el-form-item>
					<el-form-item label="审批人" prop="approve">
						<el-select v-model="addForm.approve">
							<el-option v-for="op in userList" :key="op.id" :label="op.nick_name" :value="op.id">
							</el-option>
						</el-select>
					</el-form-item>
					

				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialog.addDialog = false">关 闭</el-button>
				<el-button type="primary" @click="submitFormAdd('addForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getflowList,
		getUserListcommon,
		addFlow
	} from './index';
	export default {
		name: 'basetable',
		data() {
			var checkAge = (rule, value, callback) => {
				let reg = /^[0-9]*[1-9][0-9]*$/
				if (!reg.test(value)) {
					return callback(new Error('输入数字'));
				} else {
					callback()
				}
			};
			return {
				tableData: [],
				total: 0,
				tabPages: {
					page: 1,
					page_size: 17,
				},
				dialog: {
					addDialog: false,
				},
				userList: [],
				addForm: {
					title: '',
					approve: '',
					step: '',
				},
				id:'',
				rules: {
					title: [{
							required: true,
							message: '请输入流程名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 20,
							message: '长度在 2 到 20 个字符',
							trigger: 'blur'
						}
					],
					step: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					approve: [{
						required: true,
						message: '请选择审批人',
						trigger: 'change'
					}]
				}
			};
		},
		created() {
			this.getTab()
			this.getUserListcommon()
		},
		methods: {
			addFlow(){
				this.dialog.addDialog=true;
				this.id='';
				this.addForm = this.$options.data().addForm
			},
			//修改流程
			eventClick(row){
				this.id=row.id
				this.addForm.step=row.step
				this.addForm.approve=row.approve==0?'':row.approve
				this.addForm.title=row.title
				this.dialog.addDialog = true
			},
			//添加用户
			submitFormAdd(formName) {
				let data={}
				data.row=this.addForm
				if(this.id!=''){
					data.id=this.id
				}
				this.$refs[formName].validate((valid) => {
					if (valid) {
						addFlow(data).then(res => {
							this.getTab()
							this.dialog.addDialog = false
							this.$message.success('操作成功');
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//列表
			getTab() {
				getflowList(this.tabPages).then(res => {
					this.tableData = res.data.list
					this.total = res.data.total
				});
			},
			getUserListcommon() {
				getUserListcommon().then(res => {
					this.userList = res.data
				});
			},
			handleCurrentChange(val) {
				this.tabPages.page = val
				this.getTab() 
			}
		},
	}
</script>

<style scoped lang="less">
	.dialog-content-box {
		padding: 0 10%;

		.el-form-item {
			margin-bottom: 20px !important;
		}
	}
</style>
